import React, { useState } from 'react'
import { useHistory } from 'react-router-dom'
import { Button, Input, Space, Divider, Select, message, Form } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import './css/add.css'
function Add() {
  const history = useHistory()
  // 纪录姓名
  const [name, setName] = useState('')
  const [name2, setName2] = useState('')
  // 纪录性别
  const [sex, setSex] = useState('男')
  const [sex2, setSex2] = useState('男')
  // 纪录年龄
  const [age, setAge] = useState('')
  const [age2, setAge2] = useState('')
  // 纪录地址
  const [address, setAddress] = useState('')
  const [address2, setAddress2] = useState('')
  // console.log(setName,sex,age,address)

  //  用于纪录自定义属性
  const [customKey, setCustomKey] = useState([])
  const [customKey2, setCustomKey2] = useState([])
  //  用于纪录自定义属性值
  const [customValue, setCustomValue] = useState([])
  const [customValue2, setCustomValue2] = useState([])
  // 获取本地存储的信息
  const stuList = JSON.parse(localStorage.getItem('stuList'))
  // 提交信息
  const toSubmit = () => {
    const newArr1 = []
    const newArr2 = []
    if (name === '' && sex === '' && age === '' && address === '') {
      message.error('请正确的输入学生信息')
    } else if (name2 === '' || sex2 === '' || age2 === '' || address2 === '') {
      message.error('请正确的输入学生信息')
    } else {
      newArr1.push({
        index: stuList.length,
        key: stuList.length + 1 + '',
        name,
        sex,
        age,
        address,
      })
      newArr2.push({
        index: stuList.length + 1,
        key: stuList.length + 2 + '',
        name: name2,
        sex: sex2,
        age: age2,
        address: address2,
      })
      // 提交完清空  顺便跳转到列表页 跳转前询问
      setName()
      setAddress()
      setAge()
      setSex('男')
      setName2()
      setAddress2()
      setAge2()
      setSex2('男')
      history.push('/')
    }
    // console.log()
    // stuList.push(newArr)
    const newStuList = [...stuList, ...newArr1, ...newArr2]
    console.log(newStuList)
    localStorage.setItem('stuList', JSON.stringify(newStuList))
  }

  return (
    <div className='add'>
      <Form>
        <div className='addtitle'>
          <span className='title'>学生录入</span>
        </div>
        <Divider />
        <div>
          <div className='stuadd'>
            <div>
              <span className='stutitle'>学生1</span>
            </div>
            <Space size='middle' style={{ marginLeft: 5 }}>
              <span style={{ marginLeft: 5 }}>学生姓名:</span>
              <Input
                className='ipt'
                placeholder='请输入学生姓名'
                value={name}
                onChange={(e) => {
                  setName(e.target.value)
                }}></Input>
            </Space>
            <Space size='middle' style={{ marginLeft: 5 }}>
              <span style={{ marginLeft: 5 }}>性别:</span>
              <Select
                defaultValue='男'
                style={{ width: 120 }}
                value={sex}
                onChange={(e) => {
                  setSex(e)
                }}>
                <Select.Option value='男'>男</Select.Option>
                <Select.Option value='女'>女</Select.Option>
              </Select>
            </Space>
            <Space size='middle' style={{ marginLeft: 5 }}>
              <span style={{ marginLeft: 5 }}>年龄:</span>
              <Input
                style={{ width: 40 }}
                value={age}
                onChange={(e) => {
                  setAge(e.target.value)
                }}></Input>
            </Space>
            <Space size='middle' style={{ marginLeft: 5 }}>
              <span style={{ marginLeft: 5 }}>地址:</span>
              <Input
                placeholder='请输入地址'
                value={address}
                onChange={(e) => {
                  setAddress(e.target.value)
                }}></Input>
            </Space>
            <Form.List name='costum1'>
              {(fields, { add, remove }) => (
                <>
                  <Button
                    type='ghost'
                    style={{ marginLeft: 10 }}
                    onClick={() => add()}
                    icon={<PlusOutlined />}>
                    添加自定义属性
                  </Button>

                  {fields.map(({ key, name, fieldKey }) => (
                    <Space
                      key={key}
                      style={{
                        display: 'flex',
                        marginBottom: 8,
                        marginTop: 5,
                        marginLeft: 10,
                      }}
                      align='baseline'>
                      <Form.Item label='自定义属性' fieldKey={[fieldKey, 'first']}>
                        <Input
                          placeholder='自定义属性'
                          value={customKey}
                          onChange={(e) => {
                            setCustomKey(e.target.value)
                          }}
                        />
                      </Form.Item>
                      <Form.Item
                        label='自定义属性值'
                        fieldKey={[fieldKey, 'last']}
                        rules={[{ required: true, message: 'Missing last name' }]}>
                        <Input
                          placeholder='自定义属性值'
                          value={customValue}
                          onChange={(e) => {
                            setCustomValue(e.target.value)
                          }}
                        />
                      </Form.Item>
                      <Button onClick={() => remove(name)}>删除</Button>
                    </Space>
                  ))}
                </>
              )}
            </Form.List>
          </div>
          <div className='stuadd'>
            <div>
              <span className='stutitle'>学生2</span>
            </div>
            <Space size='middle' style={{ marginLeft: 5 }}>
              <span style={{ marginLeft: 5 }}>学生姓名:</span>
              <Input
                className='ipt'
                placeholder='请输入学生姓名'
                value={name2}
                onChange={(e) => {
                  setName2(e.target.value)
                }}></Input>
            </Space>
            <Space size='middle' style={{ marginLeft: 5 }}>
              <span style={{ marginLeft: 5 }}>性别:</span>
              <Select
                defaultValue='男'
                style={{ width: 120 }}
                value={sex2}
                onChange={(e) => {
                  setSex2(e)
                }}>
                <Select.Option value='男'>男</Select.Option>
                <Select.Option value='女'>女</Select.Option>
              </Select>
            </Space>
            <Space size='middle' style={{ marginLeft: 5 }}>
              <span style={{ marginLeft: 5 }}>年龄:</span>
              <Input
                style={{ width: 40 }}
                value={age2}
                onChange={(e) => {
                  setAge2(e.target.value)
                }}></Input>
            </Space>
            <Space size='middle' style={{ marginLeft: 5 }}>
              <span style={{ marginLeft: 5 }}>地址:</span>
              <Input
                placeholder='请输入地址'
                value={address2}
                onChange={(e) => {
                  setAddress2(e.target.value)
                }}></Input>
            </Space>

            <Form.List name='costum2'>
              {(fields, { add, remove }) => (
                <>
                  <Button
                    type='ghost'
                    style={{ marginLeft: 10 }}
                    onClick={() => add()}
                    icon={<PlusOutlined />}>
                    添加自定义属性
                  </Button>

                  {fields.map(({ key, name, fieldKey }) => (
                    <Space
                      key={key}
                      style={{
                        display: 'flex',
                        marginBottom: 8,
                        marginTop: 5,
                        marginLeft: 10,
                      }}
                      align='baseline'>
                      <Form.Item label='自定义属性' fieldKey={[fieldKey, 'first']}>
                        <Input
                          placeholder='自定义属性'
                          value={customKey2}
                          onChange={(e) => {
                            setCustomKey2(e.target.value)
                          }}
                        />
                      </Form.Item>
                      <Form.Item label='自定义属性值' fieldKey={[fieldKey, 'last']}>
                        <Input
                          placeholder='自定义属性值'
                          value={customValue2}
                          onChange={(e) => {
                            setCustomValue2(e.target.value)
                          }}
                        />
                      </Form.Item>
                      <Button onClick={() => remove(name)}>删除</Button>
                    </Space>
                  ))}
                </>
              )}
            </Form.List>
          </div>
          {/* 添加自定义表单 */}

          <Button onClick={toSubmit}>批量添加</Button>
          {/* <Button htmlType='submit'>提交</Button> */}
        </div>
      </Form>
    </div>
  )
}

export default Add
